<template>
  <a-modal
    v-model:open="visible"
    :mask-closable="false"
    width="40%"
    title="查看"
    :style="{ top: '20px' }"
    :footer="null"
  >
    <div v-if="visible" v-permission="['base-data:shop:query']" v-loading="loading">
      <a-descriptions :column="2" bordered>
        <a-descriptions-item label="编号" :span="2">
          {{ formData.code }}
        </a-descriptions-item>
        <a-descriptions-item label="名称" :span="2">
          {{ formData.name }}
        </a-descriptions-item>
        <a-descriptions-item label="所属部门" :span="2">
          {{ formData.deptName }}
        </a-descriptions-item>
        <a-descriptions-item label="地址" :span="2">
          {{ formData.address }}
        </a-descriptions-item>
        <a-descriptions-item label="经度" :span="2">
          {{ formData.lng }}
        </a-descriptions-item>
        <a-descriptions-item label="纬度" :span="2">
          {{ formData.lat }}
        </a-descriptions-item>
        <a-descriptions-item label="小程序入口" :span="2">
          <a-qrcode :value="`${formData.mpUrl}/${formData.code}`" />
          <a-input :value="`${formData.mpUrl}/${formData.code}`" readOnly />
        </a-descriptions-item>
        <a-descriptions-item label="联系电话" :span="2">
          {{ formData.telephone }}
        </a-descriptions-item>
        <a-descriptions-item label="门店类型" :span="2">
          {{ $enums.SHOP_TYPE.getDesc(formData.type) }}
        </a-descriptions-item>
        <a-descriptions-item label="营业日" :span="2">
          <a-space>
            <span
              v-for="(tag, index) in ['周一', '周二', '周三', '周四', '周五', '周六', '周日']"
              :key="index"
            >
              <span v-if="formData.cycleTimeGroup.days[index]">
                {{ tag }}
              </span>
            </span>
          </a-space>
        </a-descriptions-item>
        <a-descriptions-item label="营业时段" :span="2">
          {{ formData.cycleTimeGroup.type === 1 ? '24小时营业' : '固定时间营业' }}
        </a-descriptions-item>
        <a-descriptions-item label="时段" :span="2" v-if="formData.cycleTimeGroup.type === 2">
          <div
            style="padding-bottom: 5px"
            v-for="(time, index) in formData.cycleTimeGroup.timeRange"
            :key="index"
          >
            <span>{{ time.join(' ~ ') }}</span>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="状态" :span="2">
          <available-tag :available="formData.available" />
        </a-descriptions-item>
        <a-descriptions-item label="备注" :span="2">
          {{ formData.description }}
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </a-modal>
</template>
<script>
  import { defineComponent } from 'vue';
  import * as api from '@/api/base-data/shop';
  import AvailableTag from '@/components/Tag/src/AvailableTag.vue';

  export default defineComponent({
    // 使用组件
    components: { AvailableTag },
    props: {
      id: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        // 是否可见
        visible: false,
        // 是否显示加载框
        loading: false,
        // 表单数据
        formData: {},
      };
    },
    created() {
      this.initFormData();
    },
    methods: {
      // 打开对话框 由父页面触发
      openDialog() {
        this.visible = true;

        this.$nextTick(() => this.open());
      },
      // 关闭对话框
      closeDialog() {
        this.visible = false;
        this.$emit('close');
      },
      // 初始化表单数据
      initFormData() {
        this.formData = {
          id: '',
          code: '',
          name: '',
          deptId: '',
          lng: null,
          lat: null,
          province: '',
          city: '',
          area: '',
          address: '',
          available: '',
          description: '',
          mpUrl: '',
          telephone: '',
          type: 1,
          cycleTimeGroup: {
            days: [true, true, true, true, true, true, true],
            type: 1,
            timeRange: [['00:00', '23:59']],
          },
        };
      },
      // 页面显示时触发
      open() {
        // 初始化数据
        this.initFormData();

        // 查询数据
        this.loadFormData();
      },
      // 查询数据
      loadFormData() {
        this.loading = true;
        api
          .get(this.id)
          .then((data) => {
            this.formData = {
              ...this.formData,
              ...data,
            };

            if (data.cycleTimeGroup) {
              this.formData.cycleTimeGroup = JSON.parse(data.cycleTimeGroup);
            }
          })
          .finally(() => {
            this.loading = false;
          });
      },
    },
  });
</script>
